<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>主机列表</title>
    <link href="${ctx}/assets/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <script src="${ctx}/assets/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctx}/assets/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script>

        $(function () {

            var table = $("#dataTable1").dataTable($.extend(DATA_TABLES.DEFAULT_OPTION,{
                ajax: {
                    url:"${ctx}/redis-api/getHosts",
                    data: function (param) {
                        param.search = $('#searchKey').val();
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //覆盖datatables实现的alert错误信息
                        table.fnProcessingIndicator(false);
                    }
                },
                dom: 'rt<"bottom"iflp<"clear">>',
                columns: [{
                    title: '主机IP',
                    data: 'ip',
                    className: 'text-center',
                    width: '250px',
                    valign: 'middle'
                }, {
                    title: '登录用户',
                    data: 'loginUser',
                    className: 'text-center',
                    width: '150px',
                    valign: 'middle',
                }, {
                    title: '操作',
                    data: 'id',
                    className: 'text-center',
                    width: '100px',
                    render:function(data,type, row, meta){
                        console.info(data);
                        console.info(type);
                        console.info(row);
                        console.info(meta)
                        var e = '<a href="#" mce_href="#" onclick="showDetail(\''+ row.id + '\')">编辑</a> ';
                        return e;
                    }
                }]
            }));

            $("#searchHost").click(function () {
                table.fnReloadAjax();
            })
            $("#add-host").click(function () {
                showDetail();
            });
            $('#host-detail').on('show.bs.modal', function () {

            });
            /*
            $('#table').bootstrapTable({
                url: "${ctx}/redis-api/getHosts",
                dataType: "json",
                uniqueId: "id",
                classes: "table table-hover table-no-bordered",
                striped: true,
                smartDisplay:false,
                pagination: true, //分页
                singleSelect: true,
                locale: "zh-US" , //表格汉化
                search: true, //显示搜索框
                sidePagination: "server", //服务端处理分页
                columns: [{
                    title: '主机IP',
                    field: 'ip',
                    align: 'center',
                    width: '250px',
                    valign: 'middle'
                }, {
                    title: '登录用户',
                    field: 'loginUser',
                    align: 'center',
                    width: '150px',
                    valign: 'middle',
                }, {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    width: '100px',
                    formatter:function(value, row, index){
                        var e = '<a href="#" mce_href="#" onclick="showDetail(\''+ row.id + '\')">编辑</a> ';
                        return e;
                    }
                }]
            });
            */
        });

        function showDetail(hostId){
            if (hostId != null){
                $("#myModalLabel").text("编辑主机");
                var row = $('#table').bootstrapTable('getRowByUniqueId', hostId);
                $('#ip').val(row.ip);
                $('#userName').val(row.loginUser);
                $('#password').val(row.password);
            }else{
                $("#myModalLabel").text("新增主机");
            }
            $('#host-detail').modal('show');
        }

    </script>
</head>

<body>

<div class="page-title">
    <h3>主机管理</h3>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="widget-container fluid-height clearfix">
            <div class="heading">
                <i class="icon-table"></i>主机列表
            </div>
            <div class="widget-content padded clearfix">
                <div class="form-horizontal clearfix">
                    <div class="col-md-4 pull-right">
                        <div class="col-lg-12 col-sm-12 input-group">
                            <input type="email" placeholder="请输入IP关键字" id="searchKey" class="input-sm form-control">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-sm btn-primary" id="searchHost">搜索</button>
                            </span>
                        </div>
                    </div>
                </div>

                <table class="table table-striped" id="dataTable1">
                </table>
            </div>
        </div>
    </div>
</div>


    <div class="col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <button type="button" class="btn btn-primary right-action" id="add-host">新增主机</button>
        <h3 class="sub-header">主机列表</h3>
        <table class="col-xs-10 col-sm-10 placeholder" id="table">
        </table>
    </div>

    <div class="modal fade" id="host-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="ip" class="col-sm-3 control-label">主机IP</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="ip" placeholder="请输入主机IP">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="loginUser" class="col-sm-3 control-label">登录用户名</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="loginUser" placeholder="请输入登录用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-3 control-label">登录密码</label>
                            <div class="col-sm-7">
                                <input type="password" class="form-control" id="password" placeholder="请输入登录密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-7">
                                <button type="button" class="btn btn-info">测试连接</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
